<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的在线简历</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <div class="profile">
            <img src="20200919010610_VxSzh.jpeg" alt="个人照片" class="profile-img">
            <h1>王平帅</h1>
            <p>求职意向：wed前段开发工程师</p>
        </div>
        <div class="contact-info">
            <p>电话: 182-0891-2421</p>
            <p>邮箱: qw123456786467@qq.com</p>
            <p>Gitee: <a href="https://gitee.com/blsusu" target="_blank">gitee.com/blsusu</a></p>
        </div>
    </header>

    <section class="section">
        <h2>教育背景</h2>
        <div class="content">
            <p><strong>海南经贸职业技术学院</strong> - 软件技术专业</p>
            <p>2023.09 - 2026.06</p>
            <p>主修课程: Java编程、数据库原理、Web开发、数据结构与算法</p>
        </div>
    </section>

    <section class="section">
        <h2>技能专长</h2>
        <div class="content">
            <ul>
                <li>熟练掌握Java、Python编程语言</li>
                <li>熟悉Spring Boot、MyBatis等开发框架</li>
                <li>熟悉MySQL、Oracle数据库</li>
                <li>熟悉HTML、CSS、JavaScript等前端技术</li>
                <li>熟悉Linux操作系统和Git版本控制工具</li>
            </ul>
        </div>
    </section>

    <section class="section">
        <h2>项目经验</h2>
        <div class="content">
            <h3>学生信息管理系统</h3>
            <p><strong>项目时间:</strong> 2024.11 - 2024.12</p>
            <p><strong>项目描述:</strong> 基于Spring Boot和MySQL开发的学生信息管理系统，支持学生信息的增删改查、列表展示等功能。</p>
            <p><strong>个人职责:</strong> 负责前端开发。</p>
            <p><strong>技术栈:</strong> Java, Spring Boot, MySQL, HTML, CSS, JavaScript</p>
        </div>
        <div class="content">
            <h3>我的宿舍-网页设计与制作</h3>
            <p><strong>项目时间:</strong> 2025.03 - 2025.04</p>
            <p><strong>项目描述:</strong> 使用Django框架开发的我的宿舍网站，支持添加留言板、投票等功能，定期更新网站内容，保持网站活力。</p>
            <p><strong>个人职责:</strong> 负责宿舍简介: 简短介绍宿舍成员、宿舍号、宿舍理念等的编写</p>
            <p><strong>技术栈:</strong> Python, Django, SQLite, HTML, CSS, JavaScript</p>
        </div>
    </section>

    <section class="section">
        <h2>获奖情况</h2>
        <div class="content">
            <ul>
                <li>暂无</li>
            </ul>
        </div>
    </section>

    <section class="section">
        <h2>自我评价</h2>
        <div class="content">
            <p>作为一名软件技术专业的学生，我始终以扎实掌握技术知识、提升实践能力为目标，并在学习和项目中不断成长。
                目前对分布式系统/高并发处理（或其他领域）的实战经验不足，计划通过参与开源项目或深入学习相关课程来补足短板。
                未来，我希望在软件开发领域深耕，成为一名技术扎实、能独立解决问题的工程师，并为团队创造价值。</p>
        </div>
    </section>

    <footer>
        <p>© 2025 王平帅. 版权所有.</p>
    </footer>
    <style>
        /* 打印样式 */
        @media print {
            header { flex-direction: column; text-align: center; }
            .profile-img, footer, .project-img { display: none; }
            .contact-info { border-top: 1px solid #ccc; padding-top: 15px; }
            body { font-size: 12pt; margin: 0; }
            .section { page-break-inside: avoid; }
        }

        /* 新增进度条样式 */
        .skill-meter {
            width: 80%;
            height: 20px;
            background-color: #f3f3f3;
            border-radius: 10px;
            overflow: hidden;
            margin: 10px 0;
        }
        
        .skill-progress {
            height: 100%;
            background: linear-gradient(45deg, #2196F3, #64b5f6);
            transition: width 0.5s ease;
        }

        /* 新增项目图片样式 */
        .project-img {
            width: 300px;
            height: 200px;
            object-fit: cover;
            border-radius: 8px;
            margin: 10px 0;
            transition: transform 0.3s ease;
        }

        .project-img:hover {
            transform: scale(1.05);
        }

        /* 新增打印按钮样式 */
        .print-button {
            position: fixed;
            bottom: 30px;
            right: 30px;
            padding: 12px 25px;
            background: #2196F3;
            color: white;
            border: none;
            border-radius: 25px;
            cursor: pointer;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            transition: all 0.3s ease;
        }

        .print-button:hover {
            background: #1976D2;
            transform: translateY(-2px);
            box-shadow: 0 6px 8px rgba(0,0,0,0.2);
        }
    </style>
</head>
<body>
    <!-- 在header后添加打印按钮 -->
    <button class="print-button" onclick="window.print()">打印简历</button>
</body>
</html>